<!-- START action buttons-->
<div class="button-toolbar clearfix mb">
    <div class="btn-group">
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-reply text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-reply-all text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-forward text-gray-dark"></em>
        </button>
    </div>
    <div class="btn-group" dropdown>
        <button class="btn btn-default btn-sm" dropdownToggle>
            <span class="dropdown-label" style="width: 70px">
            <em class="fa fa-folder-open"></em>
         </span>
            <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu">
            <li>
                <a href="#">
                    <em class="fa fa-inbox fa-fw"></em>Meetings
                    <span class="label label-danger pull-right">6</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <em class="fa fa-file-text-o fa-fw"></em>CSS
                    <span class="label label-info pull-right inbox-notification">10</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <em class="fa fa-envelope-o fa-fw"></em>Pending</a>
            </li>
            <li>
                <a href="#">
                    <em class="fa fa-certificate fa-fw"></em>Angular</a>
            </li>
        </ul>
    </div>
    <div class="btn-group" dropdown>
        <button class="btn btn-default btn-sm" dropdownToggle>
            <span class="dropdown-label">More</span>
            <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu">
            <li><a href="#">Mark as Read</a>
            </li>
            <li><a href="#">Mark as Unread</a>
            </li>
            <li><a href="#">Filter Messages like these</a>
            </li>
            <li><a href="#">Mute</a>
            </li>
        </ul>
    </div>
    <div class="btn-group pull-right">
        <button class="btn btn-sm btn-default" type="button">
            <em class="fa fa-archive"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-exclamation text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-times text-gray-dark"></em>
        </button>
    </div>
</div>
<!-- END action buttons-->
<div class="panel panel-default" >
    <div class="panel-body">
        <table class="table mb-mails mb-view">
            <tbody>
                <tr>
                    <td>
                        <div class="clearfix">
                            <div class="mb-mail-date">{{mail.date}}</div>
                            <img class="mb-mail-avatar" [src]="mail.from?.avatar||''" alt="Mail Avatar" />
                            <div class="pull-left">
                                <span>From:</span>
                                <span class="mb-mail-from">{{mail.from?.name}} &lt;{{mail.from?.email}}&gt;</span>
                                <p class="mb-mail-to-list">To: <a href="#" title="mailto: {{to.email}}" *ngFor="let to of mail.to">{{to.name}}</a>
                                </p>
                            </div>
                        </div>
                        <div class="mb-mail-preview mt-lg">
                            <h4>{{mail.subject}}</h4>
                            <div [innerHTML]="mail.content"></div>
                        </div>
                        <div class="mb-attachment">
                            <p *ngIf="mail.attach?.length">
                                <span>
                           <em class="fa fa-paperclip fa-fw"></em>{{mail.attach?.length}} attachments —</span><a class="mr br pr" href="#"> Download all attachments</a><a href="#">View all images</a>
                            </p>
                            <ul class="list-inline">
                                <li *ngFor="let att of mail.attach">
                                    <a href="{{att.url}}">
                                        <img class="thumb64 img-responsive img-thumbnail" [src]="att.url||''" />
                                    </a>
                                    <p>{{att.name}}</p>
                                </li>
                            </ul>
                        </div>
                        <div class="media-box">
                            <a class="pull-left" href="#">
                                <img class="media-box-object img-rounded thumb32" alt="" [src]="settings.getUserSetting('picture')||''" />
                            </a>
                            <div class="media-box-body">
                                <textarea class="form-control" placeholder="Reply here..."></textarea>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
